<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <link rel="stylesheet" href="../css/base.css">
    <title>报漏报修</title>
</head>

<body>
    <div id="app">
        <div class="card">
            <div style="padding: 10px;">
                <div class="contents bottombord">
                    <label class="title" >申请人：</label>
                    <input type="number" v-model="formdata.xm" name=""  placeholder="请输入申请人姓名">
                </div>
                <div class="contents bottombord">
                    <label class="title" >联系方式：</label>
                    <input type="number" name="" v-model="formdata.lxfs"  placeholder="请输入联系方式">
                </div>
                <div class="contents">
                    <label class="title" >报修地址：</label>
                    <input type="number" name="" v-model="formdata.bxdz"  placeholder="请输入地址">
                </div>
            </div>
        </div>
        <div class="card">
            <div style="padding: 10px;">
                <el-input type="textarea" v-model="formdata.content" :rows="3" placeholder="请输入内容" >
                </el-input>
            </div>
        </div>
        <div class="card">
            <div style="padding: 10px;display: flex;">
                <div class="contents">
                    <label class="title" >报修类型：</label>
                    <el-select v-model="formdata.bxlx" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <div class="card">
            <div style="padding: 10px;">
                <div class="contents">
                    <label class="title" >现场图片：</label>
                    <div>
                        <el-upload class="avatar-uploader" :action="actionurl" :show-file-list="false"
                                   :headers="headers" :on-success="handlePictureCardPreview" >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" width="120" height="120" >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
            </div>
        </div>
        <div class="btns">
            <button class="btn" @click="saveBaoxiu" >立即提交</button>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            options: [],
            headers:{token:localStorage.getItem("token")},
            actionurl:wwwurl+"/admin/api/UploadController/systemDopostFileUpload",
            imageUrl:"",
            formdata:{"xczp":"",bxlx:"1"},
        },
        created() {
            this.loadOptions();
        },
        methods: {
            //保存报修
            async saveBaoxiu(){
                this.formdata.xczp = this.imageUrl;
                let index = loading();
                let res = await postWebCustom(getTableId("1924"),this.formdata);
                index.close();
                this.$message(res.msg);
            },
            async loadOptions(){
                const res = await postWebCustom(getTableId("1923"),{code:"报修类型"});
                this.options = res.data;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(res,file) {
                console.log(res,file);
                this.imageUrl = res.data.src;
            }
        },

    })
</script>
<style type="text/css">
    body {
        margin: 0;
        background: rgb(228, 225, 225);
    }

    #app {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .card {
        width: 100%;
        background: #fff;
        margin-bottom: 10px;
    }

    .title {
        color: #409eff;
    }

    .contents {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 80px 1fr);
    }

    .contents label {
        width: 80px;
        line-height: 45px;
        /* text-align: right; */
    }

    .contents p {
        line-height: 14px;
    }

    .contents input {
        width: 100%;
        height: 45px;
        padding: 10px;
        border-color: #ddd;
        border-radius: 8px;
        border-style: solid;
        border: none;
        outline: none;
        font-size: 16px;
    }

    .contents .input {
        border: none;
    }

    .btns {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .btn {
        width: 80%;
        background-color: #409eff;
        color: #fff;
        margin: 0 20px;
        padding: 10px 30px;
        border: none;
        border-radius: 4px;
    }

    .bottombord {
        border-bottom: 1px solid #eee;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
</style>

</html>